import React, { useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'

import {
    //版本不同API会有差别
    useNavigate,
    useLocation,
} from 'react-router-dom'

import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import "./Tabbar.css"

const FooterNav = () => {
    const tabs = [
        {
            key: '',
            title: '首页',
            icon: <AppOutline />,
            badge: Badge.dot,
        },
        {
            key: 'life_service',
            title: '生活服务',
            icon: <UnorderedListOutline />,
            badge: '5',
        },
        {
            key: 'shop',
            title: '消商城息',
            icon: (active) =>
                active ? <MessageFill /> : <MessageOutline />,
            badge: '99+',
        },
        {
            key: 'user',
            title: '我的',
            icon: <UserOutline />,
        },
    ]

    const [activeKey, setActiveKey] = useState('home')
    const navigate = useNavigate()
    const { pathname } = useLocation()

    const navToPath = (path) => {
        navigate(path)
    }

    return (
        <>
            <TabBar activeKey={pathname} className='tab-bar' onChange={value => navToPath(value)}>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </>
    )
}

export default FooterNav